<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../favicon.ico">

  <title>Pitt GOT</title>

  <!-- Bootstrap core CSS -->
  <link href="../static/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="../static/starter-template.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->



      <meta charset='utf-8' />
      <link href='../static/fullcalendar.css' rel='stylesheet' />
      <link href='../static/fullcalendar.print.css' rel='stylesheet' media='print' />
      <script src='../static/js/moment.min.js'></script>
      <script src='../static/js/jquery.min.js'></script>
      <script src='../static/js/fullcalendar.min.js'></script>
      <script>

      $(document).ready(function() {

        $('#calendar').fullCalendar({

         header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '{{date}}',
        editable: false,
			eventLimit: true, // allow "more" link when too many events
			{% autoescape off %}
      {{events}}
      {% endautoescape %}
    });

      });



      </script>
      <script>
        function addEvent(){

          var allChanges = ""
          allChanges = allChanges+ document.getElementById("eventName").value;
          
          
          /* days of the week
          allChanges = allChanges+","+ document.getElementById("Sunday").value;
          allChanges = allChanges+","+ document.getElementById("Monday").value;
          allChanges = allChanges+","+document.getElementById("Tuesday").value;
          allChanges = allChanges+","+ document.getElementById("Wednesday").value;
          allChanges = allChanges+","+document.getElementById("Thursday").value;
          allChanges = allChanges+","+ document.getElementById("Friday").value;
          allChanges = allChanges+","+ document.getElementById("Saturday").value;
          */
          // all day?
          allChanges = allChanges+","+ document.getElementById("allday").checked;
          // repeat? how long?
          allChanges = allChanges+","+document.getElementById("repeat").checked;
          allChanges = allChanges+","+ document.getElementById("numrepeat").value;
          // start tiem/date?
          allChanges = allChanges+","+ document.getElementById("syear").value;
          allChanges = allChanges+","+document.getElementById("smonth").value;
          allChanges = allChanges+","+ document.getElementById("sday").value;
          allChanges = allChanges+","+ document.getElementById("stime").value;
          // end time/ date?
          allChanges = allChanges+","+ document.getElementById("eyear").value;
          allChanges = allChanges+","+ document.getElementById("emonth").value;
          allChanges = allChanges+","+ document.getElementById("eday").value;
          allChanges = allChanges+","+document.getElementById("etime").value;
          

          var request = new XMLHttpRequest(); 
          request.open("POST","/schedule",true);
          request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          request.send(allChanges);
          document.getElementById("form-id").submit();
        }

        function deleteEvent(){
          var deleted = document.getElementById("deleteItem").value
          var allChanges = deleted.substring(deleted.indexOf("id: ")+4,deleted.length-1)

          var request = new XMLHttpRequest(); 
          request.open("POST","/scheduleDelete",true);
          request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          request.send(allChanges);
          document.getElementById("form-id").submit();
          return xmlHttp.responseText;
          

        }
      </script>
      <style>

      body {
        margin: 40px 10px;
        padding: 10px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
        padding-top: 30px;
        padding-bottom: 30px;
      }

      #calendar {
        max-width: 900px;
        margin: 0 auto;
      }

      </style>
    </head>
    <body>

      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Pitt GOT</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="/main">Home</a></li>
              <li class="active"><a href="/schedule">Schedule</a></li>
              <li><a href="/gpa">GPA</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/contact">Contact</a></li>
              <li><a href="/settings">Settings</a></li>
              <li><a href="/logout">Logout</a></li>
            </ul>
          </div><!--/.nav-collapse -->


        </div>
      </nav>
    </div><!-- /.container -->

    <div id='calendar'></div>

    <br>
    <div class="row text-center">
      <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Add Class or Event</a>
      <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal2">Del Class or Event</a> 
    </div>
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Add a Class or Event</h4>
         </div>
         <div class="modal-body">

          <b>Event Name:</b> <input id = "eventName"/> <br> <br>
         <!-- <b>Days of the Week: </b> <br>
          Sunday: <input type="checkbox" id = "Sunday" checked="yes">
          Monday: <input type="checkbox" id = "Monday" checked="yes">
          Tuesday: <input type="checkbox" id = "Tuesday" checked="yes">
          Wednesday: <input type="checkbox" id = "Wednesday" checked="yes">
          Thursday: <input type="checkbox" id = "Thursday" checked="yes">
          Friday: <input type="checkbox" id = "Friday" checked="yes">
          Saturday: <input type="checkbox" id = "Saturday" checked="yes">
          <br> <br> -->
          <b>All Day: </b> <input type="checkbox" name="allday" id = "allday" checked="yes"> <br>
          <b>Repeat:</b> <input type="checkbox" name = "repeat" id = "repeat" checked="yes"> Number of Weeks to Repeat:
          <input id = "numrepeat"> <br> <br>
          <b>Start Time and Date:</b> <br> Year:
          <select id="syear" name="syear">
            <script>
            for(var i = 1970; i < 2100; i++){
              document.write('<option value="'+i+'">'+i+'</option>');
            }
          </script> 
          </select> Month:
          <select id="smonth" name="smonth">
            <script>
            for(var i = 1; i < 13; i++){
              if(i < 10){
                document.write('<option value="'+"0"+i+'">'+"0"+i+'</option>');
              }
              else{
                document.write('<option value="'+i+'">'+i+'</option>');
              }
            }
          </script> 
          </select> Day:

          <select id="sday" name="sday">
            <script>
            for(var i = 1; i < 31; i++){
              if(i < 10){
                document.write('<option value="'+"0"+i+'">'+"0"+i+'</option>');
              }
              else{
                document.write('<option value="'+i+'">'+i+'</option>');
              }
            }
          </script> 
          </select> Time:
          <select id="stime" name="stime">
            <script>
            for(var i = 0; i < 24; i++){
              if(i < 10)
                document.write('<option value="'+"0"+i+'">'+"0"+i+":00"+'</option>');
              else
                document.write('<option value="'+i+'">'+i+":00"+'</option>');
            }
          </script> 
          </select><br> <br>
          <b>End Time and Date: </b><br> Year:
          <select id="eyear" name="eyear">
            <script>
            for(var i = 1970; i < 2100; i++){
              document.write('<option value="'+i+'">'+i+'</option>');
            }
          </script> 
          </select> Month:
          <select id="emonth" name="emonth">
            <script>
            for(var i = 1; i < 13; i++){
              if(i < 10){
                document.write('<option value="'+"0"+i+'">'+"0"+i+'</option>');
              }
              else{
                document.write('<option value="'+i+'">'+i+'</option>');
              }
            }
          </script> 
          </select> Day:

          <select id="eday" name="eday">
            <script>
            for(var i = 1; i < 31; i++){
              if(i < 10){
                document.write('<option value="'+"0"+i+'">'+"0"+i+'</option>');
              }
              else{
                document.write('<option value="'+i+'">'+i+'</option>');
              }
            }
          </script> 
          </select> Time:
          <select id="etime" name="etime">
            <script>
            for(var i = 0; i < 24; i++){
              if(i < 10)
                document.write('<option value="'+"0"+i+'">'+"0"+i+":00"+'</option>');
              else
                document.write('<option value="'+i+'">'+i+":00"+'</option>');
            }
          </script> 
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <form id = "form-id">
            <button type="submit" class="btn btn-primary" onclick="addEvent()" data-dismiss="modal">Add</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal2" aria-hidden="true">
    <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="myModalLabel">Delete a Class or Event</h4>
       </div>
       <div class="modal-body">
          <select id = "deleteItem">
            {% for str in eventList %}
              <option value='{{str}}'>{{str}}</option>
            {% endfor %}
          </select>
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary" onclick="deleteEvent()">Delete</button>
      </div>
    </div>
  </div>
</div>

<script src="../static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
